<script setup>
import { reactive } from 'vue';

const tableData = reactive([
    {
        id: 1,
        frequency: 'MF/HF',
        station: '1.万顷沙',
        connectedReceiver: '1',
        status: '正常',
    },
    {
        id: 2,
        frequency: 'MF/HF',
        station: '1.万顷沙',
        connectedReceiver: '2',
        status: '异常',
    },
]);
</script>

<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="100" />
            <el-table-column prop="frequency" label="频段" width="180" />
            <el-table-column prop="station" label="站点" width="180" />
            <el-table-column prop="connectedReceiver" label="连接的接收机" width="180" />
            <el-table-column prop="status" label="状态" width="100">
                <template v-slot="scope">
                    <span
                        :style="{ color: scope.row.status === '异常' ? 'red' : '' }">
                        {{ scope.row.status }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped></style>
